<template>
	<view class="content_bg">
		<view class="content">
			<view class="body">
				<view class="body_t">
					<view class="body_bg"></view>
					<span>家庭成员选择</span>
				</view>
				<!-- 称呼列表 -->
				<view class="designationList">
					<view class="designation" :class="{designation_active :styleNum == index}"
						v-for="(item,index) in list" :key="index" @click="changeNme(index,item)">{{item.name}}</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="maturityTime_top">
				<view class="maturityTime_top_left"></view>
				<view class="maturityTime_top_t">填写此成员信息</view>
				<view class="maturityTime_top_right"></view>
			</view>
			<!-- 表单 -->
			<view class="contentForm">
				<u-form labelPosition="top" ref="loginForm" :model="loginForm" :labelStyle="labelStyle">
					<u-form-item label="姓名" prop="realName">
						<view class="formInput">
							<u-input placeholder="请输入名字" v-model="loginForm.realName" clearable border="none"
								fontSize="26rpx" color="#333"
								customStyle="background:#F3F3F3;border-radius: 6px"></u-input>
						</view>
					</u-form-item>
					<u-form-item label="手机号" labelWidth="100" prop="phone">
						<view class="formInput">

							<u-input placeholder="请输入手机号" border="none" fontSize="26rpx" color="#333"
								v-model="loginForm.phone" clearable />
						</view>
					</u-form-item>
					<u-form-item label="身份证号" labelWidth="100" prop="idCard">
						<view class="formInput">
					
							<u-input placeholder="请输入身份证号" border="none" fontSize="26rpx" color="#333"
								v-model="loginForm.idCard" clearable />
						</view>
					</u-form-item>
					<u-form-item label="详细地址" labelWidth="100" prop="addressInfo">
						<view class="formInput">
					
							<u-input placeholder="请输入详细地址" border="none" fontSize="26rpx" color="#333"
								v-model="loginForm.addressInfo" clearable />
						</view>
					</u-form-item>
				</u-form>
				<view class="flex_wrap row_center">
					<view class="lq_btn" @click="to_success('loginForm')">
						立即添加
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		baseUrl
	} from "@/config/tendIdConfig.js";
	export default {
		data() {
			return {
				list: [{
						name: '本人'
					},
					{
						name: '配偶'
					},
					{
						name: '父亲'
					},
					{
						name: '母亲'
					},
					{
						name: '儿子'
					},
					{
						name: '女儿'
					},
					{
						name: '爷爷'
					},
					{
						name: '奶奶'
					},
					{
						name: '外公'
					},
					{
						name: '外婆'
					},
					{
						name: '其他'
					}
				],
				styleNum: '0',
				principalCardRelation: '本人',
				labelStyle: {
					fontSize: "36rpx",
					color: "#333",
					fontWeight: "bold",
				},
				codeTxt: "获取验证码",
				loginForm: {
					realName: "",
					idCard: "",
					addressInfo: "",
					phone: "",
				},
				loginFormRules: {
					realName: [{
						type: "string",
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					}, ],
					phone: [{
							required: true,
							message: "请输入手机号",
							trigger: ["change", "blur"],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: "手机号码不正确",
							trigger: ["change", "blur"],
						},
					],
					idCard: [
					    {
					        type: "string",
					        required: true,
					        message: "请填写身份证",
					        trigger: ["blur", "change"],
					    },
					    {
					        validator: (rule, value, callback) => {
					            return this.$u.test.idCard(value);
					        },
					        message: "身份证号格式不正确",
					        trigger: ["blur"],
					    },
					],
				},
			};
		},
		onReady() {
			this.$refs.loginForm.setRules(this.loginFormRules);
		},
		onLoad(options) {
			this.cardId = options.cardId;
		},
		methods: {
			changeNme(index, item) {
				this.styleNum = index
				this.principalCardRelation = item.name
			},

			to_success() {
				const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
				const that = this;
				this.$refs.loginForm
					.validate()
					.then((res) => {
						uni.request({
							url: baseUrl + '/customer/d_card_h5/web/addMembersToCardD',
							method: "POST",
							header: {
								Authorization: token
							},
							data: {
								equityCardId: that.cardId,
								addressInfo: that.loginForm.addressInfo,
								idCard: that.loginForm.idCard,
								phone: that.loginForm.phone,
								realName: that.loginForm.realName,
								principalCardRelation: that.principalCardRelation,
							},
							success(res) {
								uni.$u.toast("添加成功");
								uni.$u.sleep(500).then(() => {
								    uni.navigateBack({
								        delta: 1,
								    });
								});
							},
						});
					})
					.catch((errors) => {});
			},
		},
	};
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.content_bg {
		width: 100%;
		height: 100%;
		background: #3e3e3e;
	}

	.content {
		display: inline-block;
		width: 100%;
		/* height: 100%; */
		background: #3e3e3e;
		padding: 0.9375rem 0.875rem 2.25rem;
		box-sizing: border-box;
	}

	.download,
	.body {
		background: #fff;
		border-radius: 0.625rem;
		color: #333;
		font-size: 1rem;
		padding: 1rem 0.875rem 2.0625rem;
		height: 100%;
		box-sizing: border-box;
	}

	.body {
		padding: .75rem .25rem 0 1.5rem;
	}

	.body_t {
		display: flex;
		align-items: center;
		font-size: 1rem;
		color: #333333;
	}

	.body_bg {
		margin-right: 0.25rem;
		width: 0.25rem;
		height: 1.0625rem;
		background: #FF8A00;
		border-radius: 200px 200px 200px 200px;
	}

	.designationList {
		display: flex;
		padding-top: .75rem;
		overflow-x: hidden;
		flex-wrap: wrap;
	}

	.designation,
	.designation_active {
		width: 3.75rem;
		height: 2rem;
		background: #F6F6F6;
		border-radius: 2000px 2000px 2000px 2000px;
		text-align: center;
		line-height: 2rem;
		margin-right: 1rem;
		margin-bottom: 1.25rem;
	}

	.designation_active {
		color: #fff;
		background: #FF8A00;
	}

	.maturityTime_top {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 1.5rem 0 .75rem 0;
	}

	.maturityTime_top_left {
		width: 4.0625rem;
		height: 0px;
		border: .0625rem solid;
		border-image: linear-gradient(250deg, rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 1), rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 0)) 1 1;
	}

	.maturityTime_top_t {
		margin: 0 .875rem;
		font-size: 1.25rem;
		color: #EAD7AC;
		font-weight: bold;
	}

	.maturityTime_top_right {
		width: 4.0625rem;
		height: 0px;
		border: .0625rem solid;
		border-image: linear-gradient(50deg, rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 1), rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 0)) 1 1;
	}

	.title {
		font-size: 1.125rem;
		font-weight: bold;
	}

	.phoneCode {
		font-size: 1rem;
		height: 2.625rem;
		background: #f3f3f3;
		border-radius: 0.375rem;
		margin: 0.625rem 0 1.25rem;
		display: flex;
		justify-content: space-between;
	}

	.sex_int {
		margin-top: 0.3125rem;
	}

	.agree_int {
		margin-top: 0.25rem;
	}

	input[type="text"]:focus {
		outline: none;
	}

	.intPhone {
		border: none;
		font-size: 1rem;
		padding: 0 0.375rem;
		width: 100%;
		border-radius: 0.375rem;
		background: #f3f3f3;
	}

	::-webkit-input-placeholder {
		font-size: 0.875rem;
		color: #999999;
	}

	:-moz-placeholder {
		font-size: 0.875rem;
		color: rgba(0, 0, 0, 0.4);
	}

	::-moz-placeholder {
		font-size: 0.875rem;
		color: rgba(0, 0, 0, 0.4);
	}

	:-ms-input-placeholder {
		font-size: 0.875rem;
		color: rgba(0, 0, 0, 0.4);
	}

	.next {
		text-align: center;
		margin-top: 0.375rem;
	}

	.next_btn {
		width: 16.25rem;
		height: 2.5rem;
		margin-top: 0.375rem;
		font-size: 1rem;
		font-weight: bold;
		color: #333333;
		align-items: center;
		background: linear-gradient(315deg, #e9a656 0%, #fde3b6 100%);
		border-radius: 1250rem;
		border: none;
	}

	.error-msg {
		font-size: 12px;
		font-weight: unset;
		color: red;
		float: right;
		display: flex;
		align-items: center;
	}

	.error-msg::before {
		content: "";
		display: block;
		width: 14px;
		height: 14px;
		/* background-image: url(../assets/round_close.png); */
		background-size: 100%;
		background-repeat: no-repeat;
		margin-right: 4px;
	}

	.right-icon {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.5rem;
	}

	.contentForm {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx 28rpx 54rpx;
	}

	.formInput {
		height: 80rpx;
		background: #f3f3f3;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.btn {
		width: 180rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #F7D25B;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		padding: 0;
	}

	.activebtn {
		width: 180rpx;
		height: 80rpx;
		background: #aaa;
		border-radius: 8rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		padding: 0;
	}

	.lq_btn {
		width: 520rpx;
		height: 86rpx;
		background: linear-gradient(315deg, #E9A656 0%, #FDE3B6 100%);
		border-radius: 40000rpx 40000rpx 40000rpx 40000rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		margin-top: 40rpx;
	}
</style>